import React from 'react';
import {
  Table,
  Form,
  Input,
  Select,
  Button,
  Col,
  Row,
  Icon,
  DatePicker,
  LocaleProvider,
} from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import styles from './index.less';
import moment from 'moment';
import { connect } from 'dva';

const Item = Form.Item;
const Option = Select.Option;
const { RangePicker } = DatePicker;

const titleList = [
  {
    name: '主任医师',
    id: '1',
  },
  {
    name: '副主任医师',
    id: '2',
  },
  {
    name: '主治医师',
    id: '3',
  },
  {
    name: '医师',
    id: '4',
  },
];

//订单状态
const orderStatus = [
  { name: '待付款', id: 'wait' },
  {
    name: '待处理',
    id: 'paid',
  },
  {
    name: '初步处理',
    id: 'initial',
  },
  {
    name: '已挂号',
    id: 'registered',
  },
  {
    name: '已结算',
    id: 'settled',
  },
  {
    name: '已执行',
    id: 'executed',
  },
  {
    name: '已取消',
    id: 'cancelled',
  },
  {
    name: '已完结',
    id: 'completed',
  },
];
//代办就诊卡
const proxyList = [
  { name: '代办理', id: 'todo' },
  { name: '办理中', id: 'handle' },
  { name: '完成', id: 'ok' },
];
//交易状态
const dealList = [
  { name: '交易中', id: 'trading' },
  { name: '交易失败', id: 'fail' },
  { name: '成功', id: 'success' },
];

//套餐状态
const comboList = [{ name: '待付款', id: 'wait' }, { name: '已完成', id: 'completed' }];

@connect(state => ({
  global: state.global,
  groups: state.groups,
}))
@Form.create()
class Pages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      unfold: true,
      hospitalId: '', //选中医院的id
      departmentId: '',
      jobTitle: '',
      doctorname: '',
      date: {},
      startTime: null,
      endTime: null,
      orderDate: null,
    };
  }

  /**
   * 获取医院列表
   */
  getHospitalList = () => {
    this.props.dispatch({
      type: 'global/hospitalList',
      payload: {},
    });
  };
  //获取科室列表
  getDepartmentList = () => {
    const { hospitalId } = this.state;
    this.props.dispatch({
      type: 'global/departmentList',
      payload: {
        hospitalId,
      },
    });
  };

  //获取医生列表
  getDoctorList = () => {
    const { hospitalId, departmentId } = this.state;
    this.props.dispatch({
      type: 'global/doctorList',
      payload: {
        hospitalId,
        departmentId,
      },
    });
  };

  //获取所有渠道列表
  getSourceList = (pageNum = 1) => {
    this.props.dispatch({
      type: 'groups/getList',
      payload: {
        pageNum,
        // pageSize,
      },
    });
  };

  //切换医院-搜索科室
  selectDepartment = value => {
    this.setState(
      {
        hospitalId: value,
      },
      () => this.getDepartmentList()
    );
  };
  //切换科室-搜索医生
  selectDoctor = value => {
    this.setState(
      {
        departmentId: value,
      },
      () => this.getDoctorList()
    );
  };

  /**
   * 搜索
   */

  //重置
  reset = () => {
    this.props.form.resetFields();
    this.setState({
      orderDate: null,
      hospitalId: null,
      endTime: null,
      startTime: null,
    });
    this.props.submit({});
  };

  //保存并提交表单到父组件
  submit = () => {
    const {
      form: { validateFields },
      submit,
    } = this.props;
    const { date, startTime, endTime, orderDate } = this.state;
    validateFields((err, values) => {
      if (!err) {
        submit({ ...values, date, startTime, endTime, orderDate });
      }
    });
  };

  //展开收起
  foldToggle = () => {
    const { unfold } = this.state;
    this.setState({
      unfold: !unfold,
      hospitalId: '',
    });
  };

  /**
   * 日期变化
   */
  dateChange = date => {
    if (date.length > 0) {
      this.setState({
        orderDate: date,
      });
    }
  };
  //开始时间 结束时间变化
  endDateChange = value => {
    this.setState({
      endTime: value,
    });
  };
  startDateChange = value => {
    this.setState({
      startTime: value,
    });
  };

  componentDidMount() {
    this.getHospitalList();
    this.getSourceList();
  }

  render() {
    const {
      global: { hospitalList, doctorList, departmentList },
      form: { getFieldDecorator },
      groups,
      type,
    } = this.props;
    const { unfold, hospitalId, orderDate, startTime, endTime } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    //医院下拉选择
    const SelectUi = (list, disabled = false) => {
      const ui =
        list &&
        list.map(item => (
          <Option value={item.id} key={item.id}>
            {item.name}
          </Option>
        ));
      return (
        <Select disabled={disabled} onSelect={this.selectDepartment}>
          {ui}
        </Select>
      );
    };
    //科室下拉选择
    const DepartmentUi = (list, disabled = false) => {
      const ui =
        list &&
        list.map(item => (
          <Option value={item.id} key={item.id}>
            {item.name}
          </Option>
        ));
      return (
        <Select disabled={disabled} onChange={this.selectDoctor}>
          {ui}
        </Select>
      );
    };

    //医生下拉选择
    const DoctorUi = (list, disabled = false) => {
      const ui =
        list &&
        list.map(item => (
          <Option value={item.id} key={item.id}>
            {item.name}
          </Option>
        ));
      return (
        <Select disabled={disabled} onChange={this.chooseDoctor}>
          {ui}
        </Select>
      );
    };

    return (
      <>
        {/**医生管理页面 */}
        {type === 'doctorManage' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={16}>
                <Col span={8}>
                  <Item {...formItemLayout} label="姓名">
                    {getFieldDecorator('doctorName')(<Input placeholder="医生姓名" />)}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="所属医院">
                    {getFieldDecorator('hospital')(SelectUi(hospitalList))}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="所属科室">
                    {getFieldDecorator('department')(
                      DepartmentUi(departmentList, hospitalId === '')
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="职称">
                    {getFieldDecorator('jobTitle')(
                      <Select>
                        {titleList.map(item => (
                          <Option value={item.name} key={item.id}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )}

        {/**订单页面 */}
        {type === 'registration' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={16}>
                <Col span={8}>
                  <Item {...formItemLayout} label="查询">
                    {getFieldDecorator('orderNoOrName')(
                      <Input placeholder="就诊人姓名/用户ID/身份证号/订单ID" />
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="订单状态">
                    {getFieldDecorator('orderStatus')(
                      <Select>
                        {orderStatus.map(item => (
                          <Option value={item.id} key={item.id}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="预约日期">
                    {getFieldDecorator('date')(
                      <LocaleProvider locale={zh_CN}>
                        <RangePicker
                          value={orderDate}
                          allowClear={false}
                          onChange={this.dateChange}
                        />
                      </LocaleProvider>
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="医院">
                    {getFieldDecorator('hospital')(SelectUi(hospitalList))}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="科室">
                    {getFieldDecorator('department')(
                      DepartmentUi(departmentList, hospitalId === '')
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="医生">
                    {getFieldDecorator('doctor')(DoctorUi(doctorList))}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )}

        {type === 'combo' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={16}>
                <Col span={8}>
                  <Item {...formItemLayout} label="查询">
                    {getFieldDecorator('id')(
                      <Input placeholder="就诊人姓名/用户ID/身份证号/订单ID" />
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="订单状态">
                    {getFieldDecorator('status')(
                      <Select>
                        {comboList.map(item => (
                          <Option value={item.id} key={item.id}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="预约日期">
                    {getFieldDecorator('date')(
                      <LocaleProvider locale={zh_CN}>
                        <RangePicker
                          value={orderDate}
                          allowClear={false}
                          onChange={this.dateChange}
                        />
                      </LocaleProvider>
                    )}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )}

        {type === 'chargeCard' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={16}>
                <Col span={8}>
                  <Item {...formItemLayout} label="查询">
                    {getFieldDecorator('idOrName')(
                      <Input placeholder="就诊人姓名/用户ID/身份证号/订单ID" />
                    )}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="订单状态">
                    {getFieldDecorator('state')(
                      <Select>
                        {proxyList.map(item => (
                          <Option key={item.id} value={item.id}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )}

        {/**前台用户页面 */}
        {type === 'users' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={16}>
                <Col span={8}>
                  <Item {...formItemLayout} label="查询">
                    {getFieldDecorator('id')(<Input placeholder="用户姓名/手机号" />)}
                  </Item>
                </Col>
                <Col span={8}>
                  <Item {...formItemLayout} label="渠道来源">
                    {getFieldDecorator('channelId')(
                      <Select>
                        {groups.list &&
                          groups.list.map(item => (
                            <Option value={item.id} key={item.id}>
                              {item.name}
                            </Option>
                          ))}
                      </Select>
                    )}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )}

        {/**财务页面 */}
        {/* {type === 'capital' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={7}>
                <Col span={8}>
                  <Item {...formItemLayout} label="查询">
                    {getFieldDecorator('cellphoneOrName')(<Input placeholder="流水号/变更金额" />)}
                  </Item>
                </Col>
                <Col span={6}>
                  <Item
                    labelCol={{
                      xs: { span: 12 },
                      sm: { span: 8 },
                    }}
                    wrapperCol={{
                      xs: { span: 24 },
                      sm: { span: 16 },
                    }}
                    label="记账时间"
                  >
                    {getFieldDecorator('startTime')(
                      <LocaleProvider locale={zh_CN}>
                        <DatePicker
                          disabledDate={disabledDate}
                          onChange={this.dateChange}
                          showTime={{
                            defaultValue: [
                              moment('00:00:00', 'HH:mm:ss'),
                              moment('11:59:59', 'HH:mm:ss'),
                            ],
                          }}
                          format="YYYY-MM-DD HH:mm"
                          placeholder="开始时间"
                        />
                      </LocaleProvider>
                    )}
                  </Item>
                </Col>

                <Col span={10}>
                  <Item
                    colon={false}
                    labelCol={{
                      xs: { span: 2 },
                      sm: { span: 2 },
                    }}
                    wrapperCol={{
                      xs: { span: 18 },
                      sm: { span: 22 },
                    }}
                    label="至"
                  >
                    {getFieldDecorator('startTime')(
                      <LocaleProvider locale={zh_CN}>
                        <DatePicker
                          disabledDate={disabledDate}
                          onChange={this.dateChange}
                          showTime={{
                            defaultValue: [
                              moment('00:00:00', 'HH:mm:ss'),
                              moment('11:59:59', 'HH:mm:ss'),
                            ],
                          }}
                          format="YYYY-MM-DD HH:mm"
                          placeholder="结束时间"
                        />
                      </LocaleProvider>
                    )}
                    <span style={{ fontSize: '13px', color: 'gray', marginLeft: '5px' }}>
                      时间跨度最多支持91天
                    </span>
                  </Item>
                </Col>

                <Col span={8}>
                  <Item {...formItemLayout} label="业务类型">
                    {getFieldDecorator('id')(<Input placeholder="流水号/变更金额" />)}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )} */}

        {type === 'deal' && (
          <Form
            style={{
              background: '#F7F7F7',
              padding: '10px 10px',
              boxSizing: 'border-box',
              position: 'relative',
            }}
          >
            {unfold && (
              <Row gutter={7}>
                <Col span={8}>
                  <Item {...formItemLayout} label="查询">
                    {getFieldDecorator('idOrName')(<Input placeholder="交易ID/商品名称" />)}
                  </Item>
                </Col>
                <Col span={6}>
                  <Item
                    labelCol={{
                      xs: { span: 12 },
                      sm: { span: 8 },
                    }}
                    wrapperCol={{
                      xs: { span: 24 },
                      sm: { span: 16 },
                    }}
                    label="记账时间"
                  >
                    {getFieldDecorator('startDate')(
                      <LocaleProvider locale={zh_CN}>
                        <DatePicker
                          allowClear={false}
                          // disabledDate={disabledDate}
                          value={startTime}
                          onChange={this.startDateChange}
                          showTime={{
                            defaultValue: [
                              moment('00:00:00', 'HH:mm:ss'),
                              moment('11:59:59', 'HH:mm:ss'),
                            ],
                          }}
                          format="YYYY-MM-DD HH:mm"
                          placeholder="开始时间"
                        />
                      </LocaleProvider>
                    )}
                  </Item>
                </Col>

                <Col span={10}>
                  <Item
                    colon={false}
                    labelCol={{
                      xs: { span: 2 },
                      sm: { span: 2 },
                    }}
                    wrapperCol={{
                      xs: { span: 18 },
                      sm: { span: 22 },
                    }}
                    label="至"
                  >
                    {getFieldDecorator('endDate')(
                      <LocaleProvider locale={zh_CN}>
                        <DatePicker
                          allowClear={false}
                          // disabledDate={disabledDate}
                          value={endTime}
                          onChange={this.endDateChange}
                          showTime={{
                            defaultValue: [
                              moment('00:00:00', 'HH:mm:ss'),
                              moment('11:59:59', 'HH:mm:ss'),
                            ],
                          }}
                          format="YYYY-MM-DD HH:mm"
                          placeholder="结束时间"
                        />
                      </LocaleProvider>
                    )}
                    <span style={{ fontSize: '13px', color: 'gray', marginLeft: '5px' }}>
                      时间跨度最多支持91天
                    </span>
                  </Item>
                </Col>

                <Col span={8}>
                  <Item {...formItemLayout} label="交易状态">
                    {getFieldDecorator('status')(
                      <Select>
                        {dealList.map(item => (
                          <Option key={item.id} value={item.id}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </Item>
                </Col>

                <Col span={6}>
                  <Item
                    labelCol={{
                      xs: { span: 12 },
                      sm: { span: 8 },
                    }}
                    wrapperCol={{
                      xs: { span: 24 },
                      sm: { span: 16 },
                    }}
                    label="交易金额"
                  >
                    {getFieldDecorator('min')(<Input />)}
                  </Item>
                </Col>

                <Col span={10}>
                  <Item
                    colon={false}
                    labelCol={{
                      xs: { span: 2 },
                      sm: { span: 2 },
                    }}
                    wrapperCol={{
                      xs: { span: 18 },
                      sm: { span: 22 },
                    }}
                    label="至"
                  >
                    {getFieldDecorator('max')(<Input style={{ width: '45%' }} />)}
                  </Item>
                </Col>
              </Row>
            )}

            <div className={styles.btnGroup}>
              <div>
                <Button type="primary" onClick={this.submit} disabled={!unfold}>
                  搜索
                </Button>
                <Button
                  onClick={this.reset}
                  disabled={!unfold}
                  style={{ marginLeft: '10px', marginRight: '10px' }}
                >
                  重置
                </Button>
                <span onClick={this.foldToggle} className="btnG">
                  收起
                  <Icon type={unfold ? 'caret-up' : 'caret-down'} />
                </span>
              </div>
            </div>
          </Form>
        )}
      </>
    );
  }
}

export default Pages;
